﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%@ include file="/include/header.jsp" %>
    <%@ include file="/include/zTree.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/h-ui/css/H-ui.min.css"/>
    <title>查看明细账</title>
    <style>
        .bgc {
            background: #FAFFD1;
        }

        .bgc2 {
            background: #FAFAFA;
        }

        .table tr {
            height: 30px;
        }

        .table thead tr th {
            border-top: 0px;
            height: 30px;
        }

        .table {
            border-left: 0px;
            border-right: 0px;
        }

        .btuDiv {
            background: #EEEEEE;
            /* 	width: 78%; */
            height: 5%;
            border-bottom: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding-top: 3px;
        }

        .rightDiv {
            height: 81.41%;
            width: 21%;
            overflow: auto;
            border: 1px solid #ccc;
            position: absolute;
            left: 78%;
            top: 13%;
        }

        .rightDiv2 {
            height: 81.41%;
            width: 2%;
            overflow: auto;
            border: 1px solid #ccc;
            position: absolute;
            left: 97%;
            top: 13%;
            background-color: #EEEEEE;
            display: none;
        }

        .rightDivTop {
            text-align: left;
            margin: 10px 10px;
            font-size: 15px;
        }

        .rightDivBottom {
            text-align: left;
            background-color: #f5fafe;
            width: 100%;
            height: 46px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            text-align: center;
        }

        .rightDivBottom-input {
            width: 250px;
            margin-top: 7px;
        }

        .rightDivBottom-a {
            position: relative;
            top: -25.9px;
            right: -116px;
        }

        .leftDiv {
            height: 83.77%;
            /* 	width: 78%;  */
            overflow: auto;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-top: 1px solid #ccc;
            background: #fff;
            margin-top: 10px;
        }

        .leftDivTop {
            text-align: left;
            margin: 9px 10px;
            font-size: 15px;
        }

        .date_txt {
            width: 111px;
        }

        .page {
            padding: 0px;
            text-align: right;
        }

        .l-layout-header-toggle {
            background: rgba(0, 0, 0, 0) url("${ctx}/images/togglebar.gif") repeat scroll -20px -40px;
            cursor: pointer;
            height: 20px;
            left: 3px;
            overflow: hidden;
            position: absolute;
            top: 12px;
            width: 20px;
        }

        .l-layout-header-toggle:hover {
            background-position: -20px -60px;
        }

        .l-layout-collapse-right-toggle {
            background: rgba(0, 0, 0, 0) url("${ctx}/images/togglebar.gif") repeat scroll -20px 0px;
            cursor: pointer;
            height: 20px;
            left: 3px;
            overflow: hidden;
            position: absolute;
            top: 12px;
            width: 20px;
        }

        .l-layout-collapse-right-toggle:hover {
            background-position: -20px -20px;
        }

        .width-100 {
            width: 97.3%;
        }

        .width-78 {
            width: 78%;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            /*$(".btnShow").click(function(event) {
                $(".DivToggle").toggle();
            });*/
            $(".leftDiv").addClass("width-78");
            $(".btuDiv").addClass("width-78");
            $(".l-layout-header-toggle").click(function (event) {
                $(".rightDiv").hide();

                $(".leftDiv").removeClass("width-78");
                $(".btuDiv").removeClass("width-78");
                $(".leftDiv").addClass("width-100");
                $(".btuDiv").addClass("width-100");
                $(".rightDiv2").show();
            });

            $(".l-layout-collapse-right-toggle").click(function (event) {
                $(".rightDiv2").hide();
                $(".leftDiv").removeClass("width-100");
                $(".btuDiv").removeClass("width-100");
                $(".leftDiv").addClass("width-78");
                $(".btuDiv").addClass("width-78");
                $(".rightDiv").show();
            });

        });
    </script>

</head>
<body>
<div class="main_panel m_b20">
    <div class="ch_panel" id="queryDiv">
        <form id="objForm" action="post">
            <input type="hidden" data-qname="dicCode" id="dicCode" name="dicCode" value=""/>
            <table class="c_table">
                <tr>
                    <td class="t_l" style="padding-left: 10px;">
                        会计期间：
                        <input type="text" value="${startTimeStr }" class="date_txt" id="startTimeStr"
                               name="startTimeStr" data-qname="startTimeStr"
                               onfocus="WdatePicker({minDate:'${minDate}',maxDate:'${maxDate}',dateFmt:'yyyy-MM'})"
                               readonly="readonly"/>
                        至
                        <input type="text" value="${endTimeStr }" class="date_txt" id="endTimeStr" name="endTimeStr"
                               data-qname="endTimeStr"
                               onfocus="WdatePicker({minDate:'${minDate}',maxDate:'${maxDate}',dateFmt:'yyyy-MM'})"
                               readonly="readonly"/>
                    </td>
                    <td width="50%" style="border-right: 0px;"></td>
                    <td class="t_r">
                        <input type="button" value="查询" id="searchBtn" class="c_btn"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>


    <div class="leftDiv">
        <div class="leftDivTop">
            [科目]：<span id="titleName">1002 银行存款</span>
        </div>
        <table id="tbwrap" class="table table-border table-bordered table-bg m_t10"></table>
    </div>
    <div class="btuDiv">
        <div class="page" id="j_pager"></div>
    </div>

    <div class="rightDiv">
        <div class="rightDivTop">
            <div class="l-layout-header-toggle"></div>
            <span class="m_l15">快速切换<apan/>
        </div>
        <div class="rightDivBottom">
            <input type="text" class="input_txt rightDivBottom-input" id="dic_Code" name="dic_Code" onkeyup="filter()"/>
            <a id="findByDicCode" class="rightDivBottom-a">
                <img src="${ctx}/images/check_btn.png">
            </a>
        </div>
        <div style="overflow: auto; width: 100%; height: 79.9%;">
            <input type="hidden" id="addressCode" data-qname="addressCode" name="addressCode" value=""/>
            <div id="menuContent" class="menuContent" style="display: none; background-color: white; z-index: 1">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>

    <div class="rightDiv2">
        <div class="rightDivTop">
            <div class="l-layout-collapse-right-toggle"></div>
        </div>
    </div>

    <script type="text/html" id="tb_template">
        <thead>
        <tr>
            <th style="border-left: 0px;" class="t_c" width="12%">日期</th>
            <th class="t_c" width="9%">凭证字号</th>
            <th class="t_c" width="32%">摘要</th>
            <th class="t_c" width="10%">借方(元)</th>
            <th class="t_c" width="10%">贷方(元)</th>
            <th class="t_c" width="5%">方向</th>
            <th style="border-right: 0px;" class="t_c" width="10%">余额(元)</th>
        </tr>
        </thead>
        <tbody data-type="body" id="tbodyB">
        <!if(list.length>0) { !>
        <!for(var i=0,len=list.length;i
        <len
                ;i++){
                var item=list[i];
                !>
            <!if(item["zyJl"]=='期初余额' || item["zyJl"]=='本期合计' || item["zyJl"]=='本年累计') { !>
            <tr class="bgc2">
                <!}else{!>
            <tr>
                <!}!>
                <td style="border-left: 0px;" class="t_c"><!=item["pzDateStr"]!></td>
                <td class="t_c">
                    <a onclick="goToPingZheng('<!=item['uuid']!>')" style="color: #6699FF;">
                        <!=item["pzz"]!>
                        <!if(item["pzhStr"]!="") { !>
                        -<!=item["pzhStr"]!>
                        <!}!>
                    </a>
                </td>

                <!if(item["zyJl"]=='期初余额' || item["zyJl"]=='本期合计' || item["zyJl"]=='本年累计') { !>
                <td align="left" style="padding-left: 20px;">
                    <!}else{!>
                <td class="t_l">
                    <!}!>
                    <!=item["zyJl"]!>
                </td>

                <td class="t_r"><!=item["jfje"]!></td>
                <td class="t_r"><!=item["dfje"]!></td>
                <td class="t_c">
                    <!if(item["yueFx"]=='1') { !>
                    借
                    <!}else if(item["yueFx"]=='-1') {!>
                    贷
                    <!}!>
                </td>
                <td class="t_r"><!=item["yuE"]!></td>
            </tr>
            <!}!>
            <!}else{!>
            <tr>
                <td style="border-left: 0px;border-right: 0px;" class="t_c" colspan="10"> 暂无数据</td>
            </tr>
            <!}!>
        </tbody>
    </script>

    <script type="text/javascript">
        $(function () {

            //ajax请求添加等待图片
            $(document).ajaxStart(function () {
                ZENG.msgbox.show(" 正在加载中，请稍后...", 6, 8000);
            });

            $(document).ajaxComplete(function () {
                ZENG.msgbox.hide();
            });

            // 5、查询
            $("#searchBtn").click(function () {
                search($("#dicCode").val());
            });

        });

        function goToPingZheng(uuid) {
            parent.article_add('查看凭证信息', '${ctx}/pingZheng/view?uuid=' + uuid);
        }
    </script>

    <script type="text/javascript">
        function search(dicCode) {
            $("#dicCode").val(dicCode);
            // 这里放包含查询条件的DIV
            var paramData = easyUtils.getQueryDivDefault("queryDiv");

            seajs.use(["component/table"], function (uiTable) {
                var param = {
                    url: "${ctx}/kmYuEBiao/mingXiListAjaxPage", data: paramData
                };
                easyUtils.getData(param, function (result) {

                    if (result.msg) {//请求失败
                        alert(result.msg);
                        return;
                    }

                    easyUtils.buildTable(result, param, uiTable);

                    $("#tbwrap tr").hover(function () {
                        $(this).addClass("bgc");
                        $("a[dataCode='" + $(this).attr("dicCode") + "']").addClass("xiahuaxian");
                    }, function () {
                        $(this).removeClass("bgc");
                        $("a[dataCode='" + $(this).attr("dicCode") + "']").removeClass("xiahuaxian");
                    });
                });

            });
        }
    </script>

    <script type="text/javascript">
        showMenu();
        var kmMXiCode;

        function showMenu() {
            var cityObj = $("#addressCode");
            var cityOffset = $("#addressCode").offset();
            $("#menuContent").css({
                left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px"
            }).slideDown("fast");

        }

        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes();
            if (nodes.length > 0) {
                $("#dicCode").val(nodes[0].id);
                search(nodes[0].id);
                $("#titleName").text(nodes[0].name);
            }
        }

        var zTree;

        function initTree() {
            var setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                }, view: {
                    showLine: true
                }, async: {
                    enable: true,
                    url: "${ctx}/kmYuEBiao/kmCodeTree",
                    autoParam: ["id=parentCode"],
                    dataType: "json",
                    dataFilter: ajaxDataFilter
                }, callback: {
                    asyncError: zTreeOnAsyncError, //加载错误的fun
                    onAsyncSuccess: zTreeOnAsyncSuccess,//异步加载成功后回调
                    onClick: onClick
                }
            };

            function zTreeOnAsyncError(event, treeId, treeNode) {
                alert("异步加载失败!");
            }

            function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
                //zTree.expandAll(true);//展开所有子节点

                if ("${kmMingXiCode}") {

                    $("#startTimeStr").val("${startTimeStr}"),
                        $("#endTimeStr").val("${endTimeStr}")

                    var nodes = zTree.getNodesByParam("id", "${kmMingXiCode}", null);
                    if (nodes == "") {
                        nodes = zTree.getNodesByParam("id", kmMXiCode.id, null);
                        zTree.selectNode(nodes[0]);//选择点
                        zTree.setting.callback.onClick(null, zTree.setting.treeId, nodes[0]);//调用事件
                    } else {
                        zTree.selectNode(nodes[0]);//选择点
                        zTree.setting.callback.onClick(null, zTree.setting.treeId, nodes[0]);//调用事件
                    }
                } else {
                    var nodes = zTree.getNodesByParam("id", kmMXiCode.id, null);
                    zTree.selectNode(nodes[0]);//选择点
                    zTree.setting.callback.onClick(null, zTree.setting.treeId, nodes[0]);//调用事件
                }
            }

            //用于对 Ajax 返回数据进行预处理的回调函数。[setting.async.enable = true 时生效]
            function ajaxDataFilter(treeId, parentNode, responseData) {
                //默认查询第一个节点数据
                kmMXiCode = responseData[0];
                return responseData;
            }

            $.fn.zTree.init($("#treeDemo"), setting);
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
        }

        initTree();

        //节点查询
        $("#findByDicCode").click(function () {
            filter();
        });

        //过滤ztree显示数据
        function filter() {
            //显示所有节点
            var node = zTree.getNodes();
            var nodes = zTree.transformToArray(node);
            zTree.showNodes(nodes);

            var _keywords = $("#dic_Code").val();

            if ($.trim(_keywords) == "") {
                zTree.expandAll(false);//折叠 全部节点
                return false;
            }

            //获取符合条件的结点
            var fuHe_nodes = zTree.getNodesByParamFuzzy("name", _keywords, null);

            //给Array增加一个函数(判断数组中是否包含有该元素)
            Array.prototype.contains = function (obj) {
                var i = this.length;
                while (i--) {
                    if (this[i] === obj) {
                        return true;
                    }
                }
                return false;
            }

            //将需要显示的节点及其父节点也加入到显示数组中
            var showNodes = new Array();
            for (var i = 0; i < fuHe_nodes.length; i++) {
                huidiaoXianShi(fuHe_nodes[i]);
            }

            function huidiaoXianShi(node) {
                if (!showNodes.contains(node)) {
                    showNodes.push(node);
                }
                if (node.getParentNode() != null) {
                    huidiaoXianShi(node.getParentNode());
                }
            }

            //在总数组中挑出需要隐藏掉的节点放入到数组中
            var hideNodes = new Array();
            for (var j = 0; j < nodes.length; j++) {
                if (!showNodes.contains(nodes[j])) {
                    hideNodes.push(nodes[j]);
                }
            }

            zTree.hideNodes(hideNodes);
            zTree.expandAll(true);//展开所有子节点
        };
    </script>
</body>
</html>